<template>
	<div class="data-preview">
		<div class="preview-header">
			<h3>数据预览</h3>
			<div class="preview-info">
				<el-tag type="info"
					>数据:
					<span style="color: blue">
						{{ validDataCount }}
					</span>
				</el-tag>
			</div>
		</div>

		<div class="table-container">
			<el-table
				v-loading="loading"
				:data="filteredData"
				border
				stripe
				style="width: 100%"
				height="400px"
				:header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
			>
				<!-- <el-table-column type="index" label="序号" width="50" /> -->
				<el-table-column :prop="nameColumn" label="姓名" fixed="left" min-width="90" />
				<el-table-column :prop="studentIdColumn" label="学号" min-width="120" />
				<el-table-column :prop="classColumn" label="班级" min-width="140" v-if="classColumn" />
				<el-table-column
					v-for="column in dynamicColumns"
					:key="column"
					:prop="column"
					:label="formatHeaderLabel(column)"
					min-width="120"
				>
					<template #default="scope">
						<span v-if="isSpecialScore(scope.row[column])">{{
							getSpecialScoreText(scope.row[column])
						}}</span>
						<span v-else>{{ scope.row[column] }}</span>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<div class="preview-validation">
			<el-alert
				v-if="validationErrors.length > 0"
				title="导入数据存在以下问题:"
				type="error"
				:closable="false"
				show-icon
			>
				<ul class="error-list">
					<li v-for="(error, index) in validationErrors" :key="index">
						{{ error }}
					</li>
				</ul>
			</el-alert>
			<el-alert v-else title="数据解析成功，可以继续" type="success" :closable="false" show-icon />
		</div>

		<div class="action-buttons">
			<el-button @click="goBack">返回上一步</el-button>
			<el-button type="primary" @click="confirmPreview" :disabled="validationErrors.length > 0">
				确认数据
			</el-button>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, computed, watch, onMounted } from 'vue'

const props = defineProps<{
	excelData: any[]
	headers: string[]
}>()

const emit = defineEmits(['preview-confirmed', 'go-back'])

// 表格分页相关
const loading = ref(false)

/**
 * 过滤有效数据行，排除签字行和无效行
 * 1. 过滤掉包含"统计人"、"签字"、"审核"关键字的行
 * 2. 过滤掉包含年月日期的行
 * 3. 过滤掉非空单元格少于等于2个的行（可能是空行或标题行）
 */
const filteredData = computed(() => {
	console.log('=== DataPreview过滤数据 ===')
	console.log('原始数据行数：', props.excelData.length)

	const filtered = props.excelData.filter((row, index) => {
		if (!row) {
			return false
		}

		// 检查是否是签名行或空行
		const values = Object.values(row)
		const firstValue = String(values[0] || '').trim()

		const isStatisticianRow = firstValue.includes('统计人')
		const isSignatureRow = firstValue.includes('签字')
		const isAuditRow = firstValue.includes('审核')
		const isDateRow = firstValue.includes('年') && firstValue.includes('月')
		const hasLessThanThreeValues = values.filter((v) => v && String(v).trim() !== '').length <= 2

		const shouldFilter =
			isStatisticianRow || isSignatureRow || isAuditRow || isDateRow || hasLessThanThreeValues

		return !shouldFilter
	})

	console.log('过滤后数据行数：', filtered.length)
	return filtered
})

// 有效数据总数
const validDataCount = computed(() => {
	return filteredData.value.length
})

// 识别学号列
const studentIdColumn = computed(() => {
	return props.headers.find((h) => h.includes('学号')) || ''
})

// 识别姓名列
const nameColumn = computed(() => {
	// 先查找包含"姓名"的列
	let col = props.headers.find((h) => /姓名/.test(h)) || ''

	// 如果没找到，尝试查找序号后的第一列
	if (!col) {
		const indexColumn = props.headers.findIndex((h) => h.includes('序号') || h.includes('序 号'))
		if (indexColumn !== -1 && indexColumn + 1 < props.headers.length) {
			col = props.headers[indexColumn + 1]
		}
	}

	return col
})

// 识别班级列
const classColumn = computed(() => {
	return props.headers.find((h) => h.includes('班级')) || ''
})

/**
 * 获取动态表格列（直接从学号后开始的所有列）
 */
const dynamicColumns = computed(() => {
	const studentIdIdx = props.headers.findIndex((h) => h.includes('学号'))

	// 如果找不到学号列，返回空数组
	if (studentIdIdx === -1) return []

	// 返回学号列之后的所有列
	return props.headers.slice(studentIdIdx + 1)
})

/**
 * 格式化表头标签，使其显示更友好
 * 处理层级表头、复合表头等情况
 * @param header 原始表头字符串
 * @returns 格式化后的表头显示
 */
const formatHeaderLabel = (header: string) => {
	// 检查是否包含多级表头（用破折号分隔的）
	if (header.includes('-')) {
		const parts = header.split('-')

		// 如果是理论或实践，显示"科目名(类型)"
		if (parts.length === 2 && (parts[1] === '理论' || parts[1] === '实践')) {
			return `${parts[0]}(${parts[1]})`
		}

		// 否则只显示最后一部分
		return parts[parts.length - 1]
	}

	// 处理带下划线的表头 (如 "云计算技术_理论")
	if (header.includes('_')) {
		const parts = header.split('_')

		// 如果是理论或实践，显示"科目名(类型)"
		if (parts.length === 2 && (parts[1] === '理论' || parts[1] === '实践')) {
			return `${parts[0]}(${parts[1]})`
		}

		// 否则只显示最后一部分
		return parts[parts.length - 1]
	}

	// 对于列N格式，检查是否能提供更好的显示
	if (/^列\d+$/.test(header)) {
		// 简化列N显示
		return header
	}

	return header
}

// 数据验证
const validationErrors = ref<string[]>([])

// 监听数据变化，自动验证
watch(() => props.excelData, validateData, { immediate: true })

/**
 * 验证数据
 * 1. 识别关键列（学号、姓名、成绩等）
 * 2. 检查必要字段是否存在
 * 3. 对每行数据进行验证
 *    - 学号、姓名不能为空
 *    - 成绩必须为数字且在0-100之间
 * 4. 限制错误消息数量，避免过多提示
 */
function validateData() {
	loading.value = true
	validationErrors.value = []

	try {
		// 识别关键列
		const columns = identifyKeyColumns()

		// 检查是否有必要的字段
		validateRequiredFields(columns)

		// 验证每一行数据
		validateDataRows(columns)

		// 如果错误太多，只显示前10个
		limitErrorMessages()
	} catch (error) {
		console.error('数据验证错误:', error)
		validationErrors.value.push('数据验证过程中发生错误')
	} finally {
		loading.value = false
	}
}

/**
 * 识别表格中的关键列
 * @returns 关键列信息
 */
function identifyKeyColumns() {
	// 查找学号列
	const studentIdColumn = props.headers.find((h) => h.includes('学号')) || ''

	// 改进姓名字段识别
	let nameColumn = props.headers.find((h) => /姓名/.test(h)) || ''

	// 如果没找到包含"姓名"的列，尝试查找序号后的第一列，可能是姓名
	if (!nameColumn) {
		const indexColumn = props.headers.findIndex(
			(h) => h.includes('序号') || h.includes('序 号') || h.includes('序\r\n号')
		)
		if (indexColumn !== -1 && indexColumn + 1 < props.headers.length) {
			nameColumn = props.headers[indexColumn + 1]
		}
	}

	// 识别成绩列
	const scoreColumns = props.headers.filter(
		(h) =>
			h.includes('_理论') ||
			h.includes('_实践') ||
			h.includes('-理论') ||
			h.includes('-实践') ||
			/成绩|分数/.test(h) ||
			h === '大数据与人工智能技术' || // 添加非标准格式的科目
			h === '软件工程综合设计' ||
			(h.startsWith('列') && !isNaN(parseInt(h.replace('列', ''))))
	)

	return { studentIdColumn, nameColumn, scoreColumns }
}

/**
 * 验证是否包含必要字段
 * @param columns 已识别的列信息
 */
function validateRequiredFields(columns: {
	studentIdColumn: string
	nameColumn: string
	scoreColumns: string[]
}) {
	const { studentIdColumn, nameColumn, scoreColumns } = columns
	const missingFields = []

	if (!studentIdColumn) missingFields.push('学号')
	if (!nameColumn) missingFields.push('姓名')
	if (scoreColumns.length === 0) missingFields.push('成绩相关列')

	if (missingFields.length > 0) {
		validationErrors.value.push(`缺少必要字段: ${missingFields.join(', ')}`)
	}
}

/**
 * 验证每一行数据
 * @param columns 已识别的列信息
 */
function validateDataRows(columns: {
	studentIdColumn: string
	nameColumn: string
	scoreColumns: string[]
}) {
	const { studentIdColumn, nameColumn, scoreColumns } = columns

	filteredData.value.forEach((row, index) => {
		// 验证学号
		if (studentIdColumn && !row[studentIdColumn]) {
			validationErrors.value.push(`第 ${index + 1} 行: 学号不能为空`)
		}

		// 验证姓名
		if (nameColumn && !row[nameColumn]) {
			validationErrors.value.push(`第 ${index + 1} 行: 姓名不能为空`)
		}

		// 验证成绩
		validateScoreColumns(row, scoreColumns, index)
	})
}

/**
 * 验证成绩列数据
 * @param row 当前行数据
 * @param scoreColumns 成绩列名称数组
 * @param rowIndex 行索引
 */
function validateScoreColumns(row: any, scoreColumns: string[], rowIndex: number) {
	// 定义允许的特殊情况（不是数字的成绩）
	const allowedSpecialCases = ['缓考', '缺考', '作弊', '免修', '免考', '舞弊', '违纪']

	for (const scoreColumn of scoreColumns) {
		const score = row[scoreColumn]
		if (score === undefined || score === null || score === '') {
			// 成绩可以为空，不强制验证
			continue
		}

		// 处理特殊情况
		if (typeof score === 'string' && allowedSpecialCases.includes(score.trim())) {
			// 允许这些特殊情况，不报错
			continue
		}

		// 正常成绩验证
		const scoreNum = parseFloat(score)
		if (isNaN(scoreNum)) {
			validationErrors.value.push(
				`第 ${rowIndex + 1} 行, ${formatHeaderLabel(scoreColumn)}: 成绩必须为数字或特殊情况("缓考"/"缺考"/"作弊"等)`
			)
		} else if (scoreNum < 0 || scoreNum > 100) {
			validationErrors.value.push(
				`第 ${rowIndex + 1} 行, ${formatHeaderLabel(scoreColumn)}: 成绩必须在0-100之间`
			)
		}
	}
}

/**
 * 限制错误消息数量，避免显示过多错误
 */
function limitErrorMessages() {
	if (validationErrors.value.length > 10) {
		const count = validationErrors.value.length
		validationErrors.value = validationErrors.value.slice(0, 10)
		validationErrors.value.push(`... 还有 ${count - 10} 个错误未显示`)
	}
}

/**
 * 返回上一步
 */
const goBack = () => {
	emit('go-back')
}

/**
 * 确认预览，进入下一步
 */
const confirmPreview = () => {
	emit('preview-confirmed')
}

// 特殊成绩值映射
const specialScores = {
	缓考: 'absent',
	缺考: 'absent',
	作弊: 'violation',
	免修: 'absent',
	免考: 'absent',
	舞弊: 'violation',
	违纪: 'violation'
}

// 反向特殊成绩值映射
const specialScoresReverse: Record<string, string> = {
	absent: '缺考',
	violation: '作弊'
}

// 检查是否是特殊成绩
const isSpecialScore = (score: any) => {
	if (typeof score === 'string' && (score === 'absent' || score === 'violation')) {
		return true
	}
	return false
}

// 获取特殊成绩文本
const getSpecialScoreText = (score: string) => {
	return specialScoresReverse[score] || score
}
</script>

<style lang="scss" scoped>
.data-preview {
	width: 100%;

	.preview-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;

		h3 {
			margin: 0;
			color: var(--el-text-color-primary);
		}

		.preview-info {
			display: flex;
			gap: 10px;
		}
	}

	.table-container {
		margin-bottom: 20px;

		.pagination-container {
			margin-top: 15px;
			display: flex;
			justify-content: flex-end;
		}
	}

	.preview-validation {
		margin-bottom: 20px;

		.error-list {
			margin: 10px 0;
			padding-left: 20px;

			li {
				margin-bottom: 5px;
			}
		}
	}

	.action-buttons {
		display: flex;
		justify-content: center;
		gap: 15px;
	}
}
</style>
